<template>
	<view id="resetPwdPage">
		<view class="row">
			<image class="pwd-ico" src="../../static/img/icon-code.png" mode="aspectFill"></image>
			<input type="password" placeholder="请设置新密码" v-model="pwd" @blur="oldBlur"/>
		</view>
		<view class="row">
			<image class="pwd-ico" src="../../static/img/icon-code.png" mode="aspectFill"></image>
			<input type="password" placeholder="请确认新密码" v-model="repwd" @blur="reBlur"/>
		</view>
		<view class="pwd-tip" v-if="showTip">
			两次输入密码不一致
		</view>
		<view class="pwd-tip" v-if="showTip2">
			格式不正确，输入4-16位带字母、数字的组合密码
		</view>
		<view class="nextBtn" @click="backLogin">
			完成
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pwd: '',
				repwd: '',
				showTip: false,
				showTip2: false,
				valid: true
			}
		},
		methods: {
			validFormat(val) {
				let reg = /^[A-Za-z0-9]{3,15}$/
				this.showTip2 = !reg.test(val)
				return reg.test(val)
			},
			oldBlur() {
				this.validFormat(this.pwd)
			},
			reBlur() {
				if (!this.validFormat(this.repwd)) {
					return
				}
				if (this.pwd && this.repwd) {
					this.showTip = this.pwd !== this.repwd
				}
				
			},
			backLogin() {
				uni.reLaunch({
					url: '../login/login'
				})
			}
		}
	}
</script>

<style>
#resetPwdPage {
	padding-top: 80upx;
}
.row {
	height: 86upx;
	width:604upx;
	border-bottom: 2upx solid rgba(238,238,238,1);
	display: flex;
	margin: 40upx auto 0;
}
.pwd-ico {
	width: 31upx;
	height: 35upx;
	margin: 0 33upx 0 0;
}
.pwd-tip {
	margin: 7upx 0 0 140upx;
	height:23upx;
	font-size:24upx;
	font-family:'PingFang SC';
	font-weight:500;
	color:rgba(234,10,42,1);
}
.nextBtn {
	width:452upx;
	height:90upx;
	background:#111821;
	border-radius:45upx;
	font-size:34upx;
	font-family:'PingFang SC';
	font-weight:bold;
	color:rgba(234,10,42,1);
	text-align: center;
	line-height: 90upx;
	margin: 184upx auto 0;
}

</style>
